<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>SJ Enterprise Suite</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-br from-blue-900 to-indigo-900 min-h-screen p-8">
<div class="max-w-6xl mx-auto space-y-8">

<!-- 顶部导航 -->
<div class="glass-panel flex items-center justify-between px-6 py-4">
    <div class="flex items-center space-x-4">
        <img src="https://source.unsplash.com/100x100/?portrait"
             class="w-10 h-10 rounded-full border-2 border-white/30">
        <div>
            <h2 class="text-white font-semibold text-lg">SJ Corp</h2>
            <p class="text-blue-200 text-sm">admin@sj.com</p>
        </div>
    </div>
    <div class="flex space-x-3">
        <button class="glass-btn p-2">🔔<span class="badge">3</span></button>
        <button class="glass-btn p-2">⚙️</button>
    </div>
</div>

<!-- 核心功能矩阵 -->
<div class="grid grid-cols-4 gap-6">
    <!-- 财务报销模块 -->
    <div class="glass-panel p-6 hover:bg-white/5 transition-colors">
        <div class="flex items-center space-x-4 mb-4">
            <div class="glass-icon bg-blue-500/20">
                <span class="text-2xl text-blue-300">💰</span>
            </div>
            <div>
                <h3 class="text-white font-medium">财务报销</h3>
                <p class="text-blue-200 text-sm">待处理：2笔</p>
            </div>
        </div>
        <div class="space-y-4">
            <button class="glass-btn w-full bg-blue-500/30">新建申请</button>
            <div class="text-blue-200 text-sm space-y-2">
                <div class="flex justify-between">
                    <span>本月额度</span>
                    <span>¥12,800/15,000</span>
                </div>
                <div class="h-px bg-white/10"></div>
                <div class="flex justify-between items-center">
                    <span>流程图解</span>
                    <span class="text-xs">▶️</span>
                </div>
            </div>
        </div>
    </div>

    <!-- 审批流程模块 -->
    <div class="glass-panel p-6 hover:bg-white/5 transition-colors">
        <div class="flex items-center space-x-4 mb-4">
            <div class="glass-icon bg-green-500/20">
                <span class="text-2xl text-green-300">✅</span>
            </div>
            <div>
                <h3 class="text-white font-medium">流程审批</h3>
                <p class="text-blue-200 text-sm">待处理：5项</p>
            </div>
        </div>
        <div class="space-y-3">
            <div class="flex justify-between text-sm text-blue-200">
                <span>报销审批</span>
                <span>3条</span>
            </div>
            <div class="h-px bg-white/10"></div>
            <!-- 更多审批类型... -->
        </div>
    </div>

    <!-- 考勤打卡模块 -->
    <div class="glass-panel p-6 hover:bg-white/5 transition-colors">
        <div class="flex items-center space-x-4 mb-4">
            <div class="glass-icon bg-purple-500/20">
                <span class="text-2xl text-purple-300">🕒</span>
            </div>
            <div>
                <h3 class="text-white font-medium">考勤打卡</h3>
                <p class="text-blue-200 text-sm">已打卡 09:28</p>
            </div>
        </div>
        <div class="grid grid-cols-2 gap-3">
            <button class="glass-btn py-2 bg-purple-500/30">补卡申请</button>
            <button class="glass-btn py-2 bg-purple-500/30">统计报表</button>
        </div>
    </div>

    <!-- 请假申请模块 -->
    <div class="glass-panel p-6 hover:bg-white/5 transition-colors">
        <div class="flex items-center space-x-4 mb-4">
            <div class="glass-icon bg-amber-500/20">
                <span class="text-2xl text-amber-300">🏖️</span>
            </div>
            <div>
                <h3 class="text-white font-medium">请假申请</h3>
                <p class="text-blue-200 text-sm">剩余年假5.5天</p>
            </div>
        </div>
        <button class="glass-btn w-full bg-amber-500/30">申请休假</button>
    </div>
</div>

<!-- 样式定义 -->
<style>
    .glass-panel {
        @apply bg-white/10 backdrop-blur-lg rounded-2xl border border-white/20 shadow-xl;
    }
    .glass-btn {
        @apply bg-white/10 hover:bg-white/20 transition-all
               rounded-xl border border-white/20 text-white;
    }
    .badge {
        @apply absolute -top-2 -right-2 bg-red-400/80 text-white
               px-2 py-1 rounded-full text-xs font-bold;
    }
    .glass-icon {
        @apply w-12 h-12 flex items-center justify-center rounded-xl
               backdrop-blur-sm border border-white/20;
    }
</style>

</div>
</body>
</html>
